<template>
  <div class="main" style="margin-bottom: 20px;margin-top:  20px;">
    <el-form :model="queryParams" ref="elForm" size="medium" :inline="true" label-width="100px">
      <el-row>
        <el-col :span="2" :offset="1">
          <el-button type="success" @click="openAdd">新增分组</el-button>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分组名" prop="deviceId">
            <el-input v-model="queryParams.groupName" placeholder="请输入分组名" show-word-limit clearable
                :style="{ width: '100%' }"></el-input>
        </el-form-item>
        <el-form-item size="large">
            <el-button type="primary" @click="submitForm">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
        </el-col>
      </el-row>
    
    </el-form>

    <el-row type="flex" justify="center">
      <el-table
        v-loading="loading"
        :data="devGroupList"
        stripe
        border
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        style="width: 100%">

        <el-table-column
          type="index"
          min-width
          align="center"
          label="编号">
        </el-table-column>

        <el-table-column
          prop="groupName"
          label="组名"
          min-width
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="createdTimeStr"
          label="创建时间"
          min-width
          align="center"
        >
        </el-table-column>

        <!--
        <el-table-column
          prop="devInfoCount"
          label="分组下设备数"
          min-width
          align="center"
        >
        </el-table-column>
        -->
        
        <el-table-column
          label="操作"
          min-width
          align="center"
        >
          <template slot-scope="scope">
            <el-button 
              size="mini" 
              type="primary" 
              @click="getDevInfo(scope.row.id)"
              round >分组下设备信息</el-button>
            <el-button 
              size="mini" 
              type="success" 
              @click="openAddChild(scope.row.id)"
              round >新增</el-button>
            <el-button 
              size="mini" 
              type="primary" 
              @click="openDetail(scope.row.id,scope.row.pid)"
              round >详情</el-button>
            <el-button 
              size="mini" 
              type="primary" 
              @click="openEdit(scope.row.id, scope.row.pid)"
              round >编辑</el-button>
            <el-button 
              size="mini" 
              type="danger"
              @click="delDevGroup(scope.row.id)"
              round >删除</el-button>
          </template>
        
        </el-table-column>

      </el-table>
    </el-row>

    <el-dialog title="设备信息" :visible.sync="dialogTableVisible">
      <el-table :data="devInfoList" style="width: 100%">
        <el-table-column 
          prop="devMac"
          label="设备MAC"
          fixed
          width="130"
          align="center"></el-table-column>

        <el-table-column 
          prop="devName"
          label="设备别名"
          width="120"
          align="center"></el-table-column>

        <el-table-column 
          prop="onlineStatusStr"
          label="在线状态"
          width="120"
          align="center"></el-table-column>

        <el-table-column 
          prop="workStatusStr"
          label="工作状态"
          width="120"
          align="center"></el-table-column>
          
        <el-table-column 
          prop="devTypeName"
          label="设备类型"
          width="120"
          align="center"></el-table-column>
        
        <el-table-column 
          prop="devModelTypeName"
          label="设备型号"
          width="180"
          align="center"></el-table-column>

        <el-table-column 
          prop="areaName"
          label="归属区域"
          width="120"
          align="center"></el-table-column>
        
        <el-table-column 
          prop="addTimeStr"
          label="添加时间"
          width="180"
          align="center"></el-table-column>
        
        <el-table-column 
          prop="actTime"
          label="激活时间"
          width="180"
          align="center"></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 详情&编辑的表单 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form :model="devGroupInfo" ref="elForm" size="medium" :inline="true" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="分组名称" :label-width="formLabelWidthByedit">
              <el-input v-model="devGroupInfo.groupName" :disabled="disableFlag" :style="{ width: '150px' }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="创建时间" :label-width="formLabelWidthByedit">
              <el-input v-model="devGroupInfo.createdTime" :disabled="true" :style="{ width: '350px' }"></el-input>
            </el-form-item>
          </el-col>
        
        </el-row>
        <el-row>
          <el-form-item label="排序（升序）" :label-width="formLabelWidthByedit">
            <el-input v-model="devGroupInfo.sort" :disabled="disableFlag" :style="{ width: '100px' }"></el-input>
          </el-form-item>
          <el-form-item label="最后更新时间" :label-width="formLabelWidthByedit">
            <el-input v-model="devGroupInfo.updateTime" :disabled="true" :style="{ width: '350px' }"></el-input>
          </el-form-item>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer" v-if="disableFlag == false">
        <el-button type="primary" @click="edit">编辑</el-button>
      </span>
    </el-dialog>

    <!-- 新增功能的表单 -->
    <el-dialog title="新增" :visible.sync="dialogAddFormVisible">
      <el-form :model="addParam" ref="form" size="medium" :inline="true" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="分组名称" :label-width="formLabelWidthByedit">
              <el-input v-model="addParam.groupName"  :style="{ width: '150px' }" @change="change()"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="排序（升序）" :label-width="formLabelWidthByedit">
              <el-input v-model="addParam.sort" :style="{ width: '150px' }"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add">新增</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import { 
    getDevGroupList, 
    addDevGroup, 
    editDevGroup,
    getDevGroupDetail, 
    getDevInfoByGroupId,
    delDevGroup } from "@/api/alm/dev-group/dev-group";

  export default {
    data() {
      return {
        loading: false,
        // 返回的表格数据
        devGroupList: [],
        // 设备信息表格数据
        devInfoList: [],
        // 查询参数
        queryParams: {
          groupName: ""
        },
        // 返回的详情数据
        detail:[],
        dialogTableVisible: false,
        dialogFormVisible: false,
        dialogAddFormVisible: false,
        dialogAddChild: false,
        dialogTitle: "",

        editPid: 0,

        devGroupInfo:{},
        addParam:{
          groupName: "",
          sort: 0,
          pid: 0
        },

        formLabelWidthByedit: '100px',
        disableFlag: false

      };
      
    },
    created() {
      this.getDevGroupList(this.queryParams);
    },
    deactivated() {

    },
    mounted() {},
    methods: {
      // 获取分组下的设备信息
      getDevInfo(devGroupId) {
        getDevInfoByGroupId(devGroupId).then(res => {
          this.dialogTableVisible = true;
          this.devInfoList = res.data;
        })
      },
      // 获取表格数据
      getDevGroupList(obj) {
        let _this = this;
        this.loading = true;
        getDevGroupList(obj).then((res) => {
          this.devGroupList = res.data;
          this.loading = false;
        })
        },
      // 重置按钮
      resetForm(){
        this.$refs["elForm"].resetFields();
        this.queryParams = {};
        this.getDevGroupList({});
      },
      // 提交按钮
      submitForm() {
        this.getDevGroupList(this.queryParams);
      },
      // 删除分组
      delDevGroup(devGroupId) {
        delDevGroup(devGroupId).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success'
          });
          this.getDevGroupList({});
        })
      },
      // 新增子分组
      openAddChild(id) {
        this.addParam.pid = id;
        this.addParam.sort = 0;
        this.addParam.groupName = '';
        this.dialogAddFormVisible = true;
        

      },
      // 分组信息详情
      openDetail(devGroupId) {
        this.disableFlag = true;
        this.dialogTitle = '详情';
        this.dialogFormVisible = true;
        getDevGroupDetail(devGroupId).then((res) => {
          this.devGroupInfo = res.data;
          console.log(this.devGroupInfo);
        })
      },
      // 编辑按钮对话框 函数
      openEdit(devGroupId, pid) {
        this.editPid = pid;
        this.disableFlag = false;
        this.dialogTitle = '编辑';
        this.dialogFormVisible = true;
        getDevGroupDetail(devGroupId).then((res) => {
          this.devGroupInfo = res.data;
        })
      },
      // 发送编辑请求
      edit() {
        let params = {};
        params.id = this.devGroupInfo.id;
        params.groupName = this.devGroupInfo.groupName;
        params.sort = parseInt(this.devGroupInfo.sort);
        editDevGroup(params).then((res) => {
          this.getDevGroupList({});
          this.dialogFormVisible = false;
        })
      },
      // 新增按钮对话框
      openAdd() {
        this.addParam.sort = 0;
        this.addParam.groupName = '';
        this.addParam.pid = 0;
        this.dialogAddFormVisible = true;
      },
      // 新增操作
      add(){
        addDevGroup(this.addParam).then((res) => {
          this.getDevGroupList({});
          this.dialogAddFormVisible = false;
        })
      },

      change(){
        //强制刷新
	      this.$forceUpdate();  
      }
    }
  }
</script>